<template>
	<div :style="{height: isShowVideo?'100%':''}">
		<div v-if="!isShowVideo">
			<draggable :animation="300" class="sence_con" v-model="cardList" item-key="sence_name">
				<template #item="{element:item, index}">
					<transition name="fade" mode="out-in">
						<a-card :style="materialItemStyle(item, index)" @dragleave="dragLeave"
							@dragover.prevent="dragOver(item, index)" @drop="e=>onDrop(e, 'material_item')"
							class="card_list">
							<template #title>
								<div class="card_title" style="color: #fff;">
									<MenuOutlined style="cursor: move;" />
									<div class="sence_name_desc">
										<span class="sence_left_name">{{item.name}}</span>
										<span v-if="item.remark" class="sence_desc">({{item.remark}}</span>
										<span v-if="item.remark" style="font-size: 12px; color: #999;">)</span>
									</div>
									<cu-icon type="icon-bianji" @click="editSenceName(item, index)" class="edit_icon" />
								</div>
							</template>
							<template #extra>
								<div class="scene_time" style="color: #fff;">
									<div class="effect_con">
										<cu-icon class="scene_icon" type="icon-texiao1" @click="chooseSpecial(item, index)" />
										<div v-if="item?.vfx?.random" class="effect-random">随机</div>
										<div v-if="!item?.vfx?.random && item?.vfx?.sub_types?.length > 0" class="effect-num">
											{{ item?.vfx?.sub_types?.length }}
										</div>
									</div>
									
									<div class="effect_con">
										<HistoryOutlined class="scene_icon" @click="handleSenceDuration(item, index)" />
										<div v-if="item?.seconds_type" class="effect-random">
											{{ item?.seconds }}s
										</div>
									</div>
									
									<cu-icon v-if="!item.edit" class="scene_icon" type="icon-shanchu1"
										@click="deleteCard(index)" />
								</div>
							</template>
		
							<div class="card_content" :id="'card_content_'+index" :style="{minHeight: contentHeight+'px'}">
								<div class="lines_con">
									<div class="content_title">台词({{item?.items?.length?item?.items?.length:0}})</div>
									<div class="content_txt">添加台词，支持添加多段</div>
								</div>
								<div class="lines_con" v-if="!item?.items?.length">
									<div class="content_title">场景音频(0)</div>
									<div class="content_txt">添加台词后，可自动转化为一段音频</div>
								</div>
		
								<div class="lines_item" v-for="(lines_item, lines_index) in item?.items"
									:key="lines_index">
									<div class="left_lines_content">
										<a-tooltip>
										    <template #title>{{lines_item.content}}</template>
										    {{lines_item.content}}
										</a-tooltip>
									</div>
									<div class="lines_contact_icon">
										<cu-icon style="color: #ddd; font-size: 20px;" type='icon-lianjie' />
									</div>
									<div class="right_lines_audio">
										<div class="left_player_icon">
											<cu-icon @click="previewAudio(lines_item)" style="color: #609397; font-size: 15px; cursor: pointer;" type='icon-bofang' />
											<div class="duration" v-if="lines_item?.duration_text">{{lines_item?.duration_text}}</div>
											<div class="duration" v-else>未生成，点击<a style="color: #2878FF;" @click="generateAudio(lines_item, lines_index, index)">生成</a></div>
										</div>
										<div class="right_set_icon">
											<a-popover overlayClassName="popover_con" placement="bottom">
												<template #content>
													<div class="pop_operate_con">
														<a-button style="color: #fff;" type="link" @click="showLines(lines_item, lines_index, index)">编辑</a-button>
														<a-button style="color: #fff;" type="link" @click="deleteLines(lines_index, index)">删除</a-button>
													</div>
												</template>
												<cu-icon style="color: #609397; font-size: 15px;" type='icon-shezhi' />
											</a-popover>
										</div>
									</div>
								</div>
							</div>
		
							<div class="bottom_btn">
								<a-button @click="showLines(null, null, index)"
									style="background-color: transparent; color: #fff;" type="dashed" block>
									<template #icon>
										<PlusOutlined />
									</template>
									添加
								</a-button>
							</div>
		
							<div class="bottom_con">
								<div class="title_con">
									<div class="left_count">素材（{{item.video?.length}}）</div>
									<div class="right_all" @click="showVideoList(item, index)">查看全部
										<RightOutlined />
									</div>
								</div>
		
								<div class="material_con" v-if="item.video?.length == 0">
									<div class="no_material">请从左侧拖入场景视频</div>
								</div>
		
								<div class="middle_con" @click="showVideoList(item, index)" v-else>
									<div v-show="video_index<3" class="video_item"
										v-for="(video_item, video_index) in item.video" :key="video_index">
										<video v-if="video_item?.material_type != 'image'" :src="video_item.material_url" />
										<img v-else :src="video_item.material_url" />
									</div>
									<div class="video_item_2" v-if="item.video?.length>3">
										+{{item.video?.length - 3}}
									</div>
								</div>
							</div>
						</a-card>
					</transition>
				</template>
		
				<template #footer>
					<div class="right_add" :style="{height: contentHeight + 258 + 'px'}" @click="addCard">
						<PlusOutlined />
						添加场景
					</div>
				</template>
			</draggable>
		
			<editSenceModal :senceItem="senceItem" :visible="editVisible" @close="closeEdit" />
			<addSpecialEffects :visible="effectVisible" :data="senceItem?.vfx"
				@submit="handleEffectSubmit" @close="closeEffect" />
			<senceDuration :senceItem="senceItem" :visible="durationVisible" @close="closeDuration" />
			<addLines :visible="linesVisible" :linesDetail="linesDetail" @close="closeLines" />
		</div>
		
		<div @dragover.prevent class="sence_com" @drop="e=>onDrop(e, 'sence_com')" v-else>
			<div class="top_con">
				<a-button size="small" class="back_btn" @click="backToSence">返回</a-button>
				<div class="sence_name">{{currentSence.name}}</div>
			</div>
			<div class="video_con" v-if="currentSence.video.length>0">
				<div class="video_item" v-for="(item, index) in currentSence.video" :key="index">
					<div class="operate_con">
						<div class="bottom_con">
							<cu-icon v-if="!item.edit" class="bottom_icon" type="icon-shanchu1"
								@click="deleteVideo(index)" />
						</div>
					</div>
					<div class="material_image">
						<div class="video_duration">{{item.material_duration_text}}</div>
						<video v-if="item?.material_type != 'image'" :src="item.material_url" alt="" />
						<img v-else :src="item.material_url" />
					</div>
					<div class="material_name">{{item.material_name}}</div>
				</div>
			</div>
			<div class="video_con" style="display: flex; align-items: center; justify-content: center; color: #fff;" v-else>
				请从左侧拖入场景视频
			</div>
		</div>
		
		<warmTips :visible="tipsVisible" @close="handleTipsClose" />
		
		<PreviewModal
			:type="previewObj.type"
			:visible="previewObj.visible"
			:url="previewObj.url"
			:title="previewObj.title"
			@onCancel="closePreview"
		/>
	</div>
</template>

<script>
	let count = 1
	const INITIAL_SENCE_LiST = [{
		edit: false,
		name: '场景' + count++,
		video: [],
		remark: '',
		seconds_type: 0,
		seconds: 5,
		script_line_id: null
	}]
	import draggable from 'vuedraggable';
	import {
		defineComponent,
		reactive,
		toRefs,
		computed,
		watch,
		toRaw,
		createVNode,
		ref,
		nextTick,
	} from "vue";
	import editSenceModal from "./editSenceModal.vue";
	import addSpecialEffects from "./addSpecialEffects.vue";
	import senceDuration from "./senceDuration.vue";
	import addLines from '../modules/addLines.vue';
	import PreviewModal from "@/components/PreviewModal/index.vue";
	import {
		PlusOutlined,
		MenuOutlined,
		FormOutlined,
		DeleteOutlined,
		HistoryOutlined,
		HeartOutlined,
		RightOutlined
	} from "@ant-design/icons-vue";
	import {
		message,
		Modal
	} from 'ant-design-vue';
	import request from "../../../../../../common/utils/request";
	import store from '@/store';
	import warmTips from '../modules/warmTips.vue';
	export default defineComponent({
		components: {
			PlusOutlined,
			MenuOutlined,
			FormOutlined,
			DeleteOutlined,
			HistoryOutlined,
			HeartOutlined,
			RightOutlined,
			editSenceModal,
			addSpecialEffects,
			senceDuration,
			draggable,
			addLines,
			PreviewModal,
			warmTips
		},
		setup(props, context) {
			const state = reactive({
				cardList: [...INITIAL_SENCE_LiST],
				editVisible: false,
				senceItem: {},
				effectVisible: false,
				durationVisible: false,
				isShowVideo: false,
				currentHover: -1,
				currentSence: {},

				linesVisible: false,
				linesDetail: {},
				
				contentHeight: 50,
				previewObj: {
					type: 'audo',
					visible: false,
					url: '',
					title: ''
				},
				isRequesting: false,
				tipsVisible: false
			});

			const deleteCard = (index) => {
				if (state.cardList.length == 1) {
					message.warn('至少有一个场景')
					return
				}
				state.cardList.splice(index, 1)
				context.emit('updateNumber', {
					type: 'sence',
					count: state.cardList.length
				})
			}

			const addCard = () => {
				state.cardList.push({
					edit: false,
					name: '场景' + count++,
					video: [],
					remark: '',
					seconds_type: 0,
					seconds: 5,
					script_line_id: null
				})

				context.emit('updateNumber', {
					type: 'sence',
					count: state.cardList.length
				})
			}

			const editSenceName = (item, index) => {
				state.editVisible = true
				state.senceItem = item
				state.senceItem['index'] = index
			}

			const closeEdit = (obj) => {
				if (obj) {
					state.cardList[obj.index]['name'] = obj?.sence_name
					state.cardList[obj.index]['remark'] = obj?.sence_desc
				}
				state.editVisible = false
				state.senceItem = {}
			}

			const chooseSpecial = (item, index) => {
				state.senceItem = item
				state.currentHover = index
				state.effectVisible = true
			}

			const handleSenceDuration = (item, index) => {
				state.durationVisible = true
				state.senceItem = item
				state.currentHover = index
			}

			const closeDuration = (obj) => {
				if(obj){
					if(obj.seconds_type == 0){
						state.cardList[state.currentHover]['seconds'] = 5
						state.cardList[state.currentHover]['seconds_type'] = 0
					} else {
						state.cardList[state.currentHover]['seconds'] = obj.seconds
						state.cardList[state.currentHover]['seconds_type'] = 1
					}
				}
				state.durationVisible = false
				state.senceItem = {}
			}

			const showLines = (lines_item, lines_index, index) => {
				if(!lines_item){
					state.linesDetail['index'] = index
					let audioList = store.getters.clipJSON?.audio
					if(audioList?.length){
						state.tipsVisible = true
					} else {
						handleTipsClose('confirm')
					}
				} else {
					state.linesDetail = lines_item
					state.linesDetail['lines_index'] = lines_index
					state.linesDetail['index'] = index
					state.linesVisible = true
				}
			}
			
			const handleTipsClose = (type) => {
				state.tipsVisible = false
				if(type == 'confirm'){
					state.linesVisible = true
				}
			}
			
			const getContentHeight = ()=>{
				state.contentHeight = 50
				nextTick(()=>{
					let arr = []
					state.cardList.map((item, index)=>{
						let dom = document.getElementById('card_content_'+index)
						let height = document.getElementById('card_content_'+index)?.offsetHeight
						arr.push(height)
					})
					state.contentHeight = Math.max.apply(null, arr)
				})
			}
			getContentHeight()
			
			const closeLines = (obj) => {
				state.linesVisible = false
				state.linesDetail = {}
				if (obj) {
					if (!state.cardList[obj.index]['items']) {
						state.cardList[obj.index]['items'] = []
						state.cardList[obj.index]['items'].push(obj)
					} else if(obj.lines_index || obj.lines_index == 0){
						state.cardList[obj.index]['items'][obj.lines_index] = obj
					} else {
						state.cardList[obj.index]['items'].push(obj)
					}
				}
				getContentHeight()
			}
			
			
			const deleteLines = (lines_index, index) => {
				state.cardList[index]['items'].splice(lines_index, 1)
				getContentHeight()
			}
			
			const showVideoList = (item, index) => {
				state.isShowVideo = true
				state.currentSence = item
				state.currentHover = index
			}

			const backToSence = () => {
				state.isShowVideo = false
				state.currentSence = {}
				state.currentHover = -1
				getContentHeight()
			}

			const deleteVideo = (index) => {
				state.currentSence['video'].splice(index, 1)
				message.success('删除成功！')
			}

			// 拖拽部分
			const onDrop = (e, type) => {
				e.preventDefault(); // 阻止浏览器默认行为
				if (
					!(
						dragStatus.value.element?.scene_type == "video" ||
						dragStatus.value.element?.material_type == "video" ||
						(dragStatus.value.element?.material_type == "image" &&
							dragStatus.value.element?.material_extension != "gif")
					)
				) return
				let arr = state.cardList[state.currentHover]['video']
				let arrId = state.cardList[state.currentHover]['video'].map(item => item.id)
				let flag_1 = false,
					flag_2 = false;
				dragStatus.value.materialList.map(item => {
					if (item.checked && arrId.indexOf(item.id) != -1) {
						flag_1 = true
					}
					if (item.checked && arrId.indexOf(item.id) == -1) {
						if (item?.material_type == "image") {
							item.material_duration_text = "00:05";
							item.material_duration = 5000;
						}
						flag_2 = true
						arr.push(item)
					}
				})
				state.cardList[state.currentHover]['video'] = arr
				if (flag_1) {
					message.success('部分素材重复添加，已自动剔除！')
				}
				if (!flag_1 && flag_2) {
					message.success('操作成功！')
				}

				if (type == 'material_item') {
					state.currentSence = state.cardList[state.currentHover]
					nextTick(() => {
						state.currentHover = -1
					})
				}
			}

			const dragOver = (item, index) => {
				state.currentHover = index
			}

			const dragLeave = () => {
				state.currentHover = -1
			}

			const dragStatus = computed(() => store.getters.dragStatus)

			const materialItemStyle = computed(() => {
				return function(item, index) {
					let flag_type = false
					if ((dragStatus.value.element?.scene_type == "video" ||
							dragStatus.value.element?.material_type == "video" ||
							(dragStatus.value.element?.material_type == "image" &&
								dragStatus.value.element?.material_extension != "gif"))) {
						flag_type = true
					}
					return {
						border: dragStatus.value.isDragging && state.currentHover == index &&
							flag_type ? '1px solid #2878FFFF' : dragStatus.value.isDragging &&
							flag_type ?
							'1px dashed #2878FFFF' : '1px dashed transparent'
					}
				}
			})
			
			const previewAudio = (item) => {
				state.previewObj = {
					type: 'audio',
					url: item.audio_url,
					title: '预览-'+item.content,
					visible: true
				}
			}
			
			const closePreview = () => {
				state.previewObj = {
					type: 'audio',
					url: '',
					title: '',
					visible: false
				}
			}
			
			const generateAudio = (lines_item, lines_index, index) => {
				if(state.isRequesting){
					message.warn('正在生成中，请稍等...')
					return
				}
				state.isRequesting = true
				request.post('/work_ai', '/user/shotstack/text-to-audio', {
					content: lines_item.content,
					volume: 0,
					speed: 1,
					voice_type: 'https://cloud.tencent.com/document/product/1073/92668',
					emotion_category: 'neutral',
					emotion_intensity: 100
				}).then(res=> {
					state.isRequesting = false
					Object.assign(state.cardList[index]['items'][lines_index], res.result)
					message.success('生成成功！')
				}).catch(err=>{
					state.isRequesting = false
				})
			}

			// 计算属性获取音频时长
			
			
			/**
			 * random 是否随机
			 * sub_types[] 特效列表
			 */
			const handleEffectSubmit = (vfx) => {
				const {
					currentHover
				} = state;
				state.cardList[currentHover] = {
					...state.cardList[currentHover],
					vfx: {
						...vfx,
					},
				};
				state.effectVisible = false;
			};
			
			const closeEffect = () => {
				state.effectVisible = false;
			};

			watch(
				() => store.getters.clipJSON.resource_data,
				(val) => {
					if (val?.length === 0) {
						state.cardList = [...INITIAL_SENCE_LiST];
						count = 2;
						return;
					}
					state.cardList = val;
					getContentHeight()
					context.emit("updateNumber", {
						type: "sence",
						count: state.cardList.length,
					});
				}, {
					deep: true,
					immediate: true
				}
			);

			watch(
				() => state.cardList,
				(val) => {
					store.dispatch("SetClipJSONResourceData", val);
				}, {
					deep: true,
					immediate: true
				}
			);

			watch(
				() => store.getters.clipJSON?.isEdit,
				(val) => {
					if (val) {
						count = state.cardList.length + 1;
					}
				}
			);

			return {
				...toRefs(state),
				deleteCard,
				editSenceName,
				addCard,
				closeEdit,
				chooseSpecial,
				handleSenceDuration,
				closeDuration,
				// 拖拽部分代码
				onDrop,
				dragOver,
				dragLeave,
				dragStatus,
				materialItemStyle,

				showVideoList,
				backToSence,
				deleteVideo,
				closeLines,
				showLines,
				deleteLines,
				generateAudio,
				previewAudio,
				closePreview,
				handleEffectSubmit,
				closeEffect,
				handleTipsClose
			}
		},
	});
</script>

<style lang="less">
	.popover_con{
		.ss-popover-inner-content{
			background-color: #333 !important;
			padding: 0;
		}
		
		.ss-popover-arrow-content{
			background-color: #333 !important;
		}
		
		.ss-tooltip-inner{
			background-color: #333 !important;
			color: #ffffff;
		}
	}
</style>

<style lang="less" scoped>
	.pop_operate_con{
		display: flex;
		flex-direction: column;
	}
	
	.theme_color {
		background-color: #333;
		color: #fff;
		border: none;
		transform: translateY(1px);

		&:hover {
			background-color: #333;
		}
	}

	:deep(.ss-card-head) {
		border-bottom: 1px solid #555 !important;
	}

	.sence_com {
		width: 100%;
		height: 100%;

		.top_con {
			display: flex;
			border-bottom: 1px solid #333;
			align-items: center;
			width: 100%;
			height: 40px;
			padding: 0 20px;

			.sence_name {
				color: #fff;
				margin-left: 20px;
			}

			.back_btn {
				color: #ddd;
				background-color: #555;
				font-size: 12px;
				border: none;
			}
		}

		.video_con {
			height: calc(100% - 40px);
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			overflow-y: scroll;

			&::-webkit-scrollbar {
				width: 5px;
				height: 0px;
			}

			&::-webkit-scrollbar-track {
				width: 5px;
				background-color: transparent;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
			}

			&::-webkit-scrollbar-thumb {
				background-color: rgba(193, 193, 193, 0.5);
				background-clip: padding-box;
				min-height: 28px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				border-radius: 4px;
			}

			.video_item {
				width: 83px;
				height: 113px;
				cursor: pointer;
				flex-shrink: 0;
				color: #fff;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-end;
				margin-top: 10px;
				position: relative;
				margin-left: 20px;

				.operate_con {
					position: absolute;
					display: none;
					left: 0;
					top: 0;
					padding: 20px;
					width: 100%;
					height: 100%;
					z-index: 99;

					.bottom_con {
						position: absolute;
						left: 0;
						bottom: 30px;
						width: 100%;
						height: 20px;
						display: flex;
						justify-content: flex-end;
						align-items: center;

						.bottom_icon {
							margin-right: 5px;

							&:hover {
								color: #2878FF;
							}
						}
					}
				}

				&:hover {
					.operate_con {
						display: block;
					}
				}

				// 图片
				.material_image {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;
					height: 83px;
					background-color: rgba(0, 0, 0, .8);
					position: relative;
					border-radius: 8px;
					border: 1px solid rgba(0, 0, 0, .8);
					overflow: hidden;

					.video_duration {
						position: absolute;
						right: 3px;
						top: 0px;
						color: #fff
					}

					video {
						max-width: 83px;
						max-height: 83px;
					}

					img {
						max-width: 83px;
						max-height: 83px;
					}
				}

				.material_name {
					margin-top: 7px;
					font-size: 12px;
					display: inline-block;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					width: 80%;
					text-align: center;
				}
			}
		}
	}

	.sence_con {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		.right_add {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999;
			margin-left: 10px;
			margin-top: 10px;

			width: 190px;
			min-height: 301px;
			background-color: #343434;
			border: 1px solid #646464;
			border-radius: 6px;
			cursor: pointer;
		}

		.card_list {
			width: 490px;
			flex-shrink: 0;
			margin-left: 10px;
			margin-top: 10px;
			background: #2b2b2e;
			border: 1px solid #2b2b2e;

			.card_title {
				display: flex;
				align-items: center;

				.sence_name_desc {
					display: flex;
					align-items: center;

					.sence_left_name {
						margin-left: 10px;
						font-size: 14px;
						max-width: 100px;
						display: inline-block;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.sence_desc {
						font-size: 12px;
						color: #999;
						max-width: 150px;
						display: inline-block;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.edit_icon {
					cursor: pointer;
					margin-left: 10px;

					&:hover {
						color: #2878FF;
					}
				}
			}

			.scene_time {
				display: flex;
				align-items: center;
				
				.effect_con{
					position: relative;
					display: flex;
					align-items: center;
					.effect-random {
						padding: 0px 5px;
						border: 1px solid #fff;
						border-radius: 50px;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						height: 14px;
						line-height: 14px;
						color: #fff;
						font-size: 10px;
						background-color: #2878FF;
						right: -24px;
						top: -10px;
					}
					
					.effect-num {
						border: 1px solid #fff;
						border-radius: 9px;
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						color: #fff;
						height: 14px;
						width: 14px;
						font-size: 10px;
						background-color: #2878FF;
						right: -10px;
						top: -10px;
					}
					
					.scene_icon {
						cursor: pointer;
						font-size: 16px;
						&:hover {
							color: #2878FF;
						}
					}
				}
				
				.scene_icon {
					cursor: pointer;
					margin-left: 32px;
					font-size: 16px;
					&:hover {
						color: #2878FF;
					}
				}
			}

			.card_content {
				display: flex;
				flex-direction: column;
				width: 100%;

				.lines_con {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					&:nth-child(2){
						margin-top: 5px;
					}
					.content_title {
						width: 45%;
						color: #8d8d91;
					}

					.content_txt {
						width: 55%;
						color: #8d8d91;
					}
				}

				.lines_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 5px;

					.left_lines_content {
						width: calc(45% - 30px);
						height: 32px;
						padding: 8px;
						background: #36404f;
						border-radius: 4px;
						font-size: 12px;
						color: #6681a8;
						line-height: 17px;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						display: inline-block;
						overflow: hidden;
					}

					.lines_contact_icon {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 30px;
					}

					.right_lines_audio {
						width: calc(55%);
						height: 32px;
						padding: 0 14px;
						background: #364d4f;
						border-radius: 4px;
						font-size: 12px;
						color: #609397;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						display: flex;
						align-items: center;
						justify-content: center;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left_player_icon {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.duration {
								margin-left: 5px;
							}
						}
						
						.right_set_icon{
							
						}
					}
				}
			}

			.bottom_btn {
				margin-top: 10px;
				color: #fff;
			}

			.bottom_con {
				margin-top: 10px;

				.title_con {
					display: flex;
					align-items: center;
					justify-content: space-between;
					cursor: pointer;

					.left_count {
						color: #8d8d91;
						font-size: 14px;
					}

					.right_all {
						color: #8d8d91;
						font-size: 14px;
					}
				}

				.material_con {
					height: 80px;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;

					.no_material {
						color: #8d8d91;
						font-size: 14px;
					}
				}

				.middle_con {
					display: flex;
					align-items: center;
					height: 80px;
					cursor: pointer;

					.video_item {
						width: 60px;
						height: 60px;
						margin-right: -25px;
						border-radius: 10px;
						box-shadow: 1px 1px 20px #fff;
						background-color: rgba(0, 0, 0, .8);
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 5px;
						overflow: hidden;

						&:nth-child(0) {
							margin-right: 0px;
						}

						img {
							max-width: 60px;
							max-height: 60px;
						}

						video {
							max-width: 60px;
							max-height: 60px;
						}
					}

					.video_item_2 {
						width: 60px;
						height: 60px;
						margin-left: 30px;
						border-radius: 5px;
						box-shadow: 1px 1px 20px #fff;
						background-color: rgba(0, 0, 0, .8);
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
					}
				}
			}
		}
	}
</style>